<!--
  理赔客户
-->
<ion-header>
    <ion-toolbar content-page class="fir-toolbar">
        <ion-buttons start>
            <button ion-button icon-only (click)="backButtonClick($event)">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>
            理赔客户{{ (clientCompenModels && clientCompenModels.length<2) ?  '(0)' : clientTotalDes  }}
            <!--({{pageInfo.total}})-->
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content class="client-list-content-container"
             (ionScroll)="scrolling()" (touchend)="contentTouchEnd($event)"
             (ionScrollStart)="scrollStart($event)" (ionScrollEnd)="scrollEnd($event)">

    <ion-refresher (ionPull)="filterConditionsShow = false" [pullMax]="800" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
    </ion-refresher>

    <div ion-fixed class="fix-row filter" [ngClass]="{'show':filterConditionsShow}">
        <div class="tool">
            <client-filter-tool [way]="clientSortPage" #clientFilterTool (selectChanged)="selectChangeHandle($event)">
            </client-filter-tool>
        </div>
    </div>

    <div ion-fixed class="top-shadow"></div>

    <div *ngIf="(!clientCompenModels || clientCompenModels.length < 2) && isLoad" class="no-data">
        <div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>
        <div class="no-data-txt">没有相关数据</div>
    </div>
    <ion-list [virtualScroll]="clientCompenModels" [approxItemHeight]="clientItemHeight">

        <client-list-item [item]="item" *virtualItem="let item" (callNumber)="callClickHandle($event)"
                          [isShowIp]="true" (searched)="searchedHandle($event)">
            <div class="item compensation">
                受理时间 {{item.acceptTime | dateTrans}}
            </div>
            <div class="item annual-fee compensation">
                理赔类型 {{item.claimsType}}
            </div>
            <div class="item annual-fee compensation">
                申请金额 {{ item.applyPremium | numberTrans }}
                <div class="client-item" *virtualItem="let item">
                    <div class="client-item-inner">

                        <div class="client-head" (click)="goToClientDetail(item)">
                            <i class="client-icon"
                               [ngClass]="{'male':item.sex == 'M','female':item.sex == 'F'}">
                                <input type="hidden" class="client-id" [(ngModel)]="item.clientId">
                                <input type="hidden" class="client-role" [(ngModel)]="item.clientRole">
                            </i>
                            <i *ngIf="item.vipFlag!=null" class="vipFlag"
                               [ngClass]="{'vip1':item.vipFlag==1,'vip2':item.vipFlag==2,'vip3':item.vipFlag==3,'vip4':item.vipFlag==4,'novip':item.vipFlag==0}">

                            </i>

                        </div>
                        <div class="client-remark">
                            <div class="l-message age">
                                <img *ngIf="item.clientRole=='IO'||item.clientRole=='O'"
                                     src="./assets/images/common/icon_Policyholder.png">
                                <img *ngIf="item.clientRole=='IO'||item.clientRole=='I'"
                                     src="./assets/images/common/icon_Insured.png">
                            </div>
                            <div class="compenName" [ngClass]="{'is-death':item.deathFlag === 'Y'}">
                                {{item.name}}
                                <span *ngIf="item.age>=0">{{item.age?item.age+'岁':""}}</span>
                            </div>


                            <div class="item policy">
                                受理时间 {{item.acceptTime | dateTrans}}
                            </div>
                            <div class="item annual-fee">
                                理赔类型 {{item.claimsType}}
                            </div>
                            <div class="item annual-fee">
                                申请金额 {{toThousands(item.applyPremium)}}
                            </div>
                            <button class="call-wrapper" [disabled]="!item.mobilePhone || item.mobilePhone.length < 1"
                                    (click)="callPhoneNumber(item)">
                                <span class="call-wrapper-span">
                                      <img *ngIf="item.mobilePhone.length!==0"
                                           src="./assets/images/common/btn_call.png" alt="">
                                    <img *ngIf='item.mobilePhone.length==0'
                                         src="./assets/images/common/btn_call_disabled.png" alt="">
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </client-list-item>

    </ion-list>

    <div class="is-arrival-bottom" [ngClass]="{'bottom':isArriveBottom}">
        到底了
    </div>

    <ion-fab bottom right class="go-up">
        <button ion-fab (click)="goUp()" color="light">
            <img class="go-up-icon" src="./assets/images/client/client-list/icon_top.png" alt="">
        </button>
    </ion-fab>

    <ion-select #selectMobile interface="action-sheet" cancelText="取消" [(ngModel)]="currentMobile">
        <ion-option *ngFor="let num of currentMobileList index as index"
                    (ionSelect)="nativeCallPhone(num.mobile)">
            {{num.mobile}}
        </ion-option>
    </ion-select>

    <ion-fab class="fab-bottom-shadow-list">
        <button ion-fab style="display: none"></button>
    </ion-fab>
</ion-content>

